class Observer{
    constructor(data){
        this.walk(data)
    }

    walk(data){
        if( typeof(data) !== 'object' ){
            return false;
        }
        Object.keys(data).forEach((key)=>{
            this.defineReactive(data , key , data[key])
        })
    }
    defineReactive(data , key , value){
        this.walk(value)
        let that = this
        // 给data中每一个响应式数据都添加一个 Dep , 让它负责收集依赖于当前数据的watcher 
        const dep = new Dep()
        Object.defineProperty(data , key , {
            enumerable:true,
            configurable:true,
            get(){
                // 每当创建一个watcher 时,都会首先去获取这条数据,从而触发这个数据的getter
                //并且将这个watcher添加进入当前数据的Dep 中
                Dep.target && dep.addWatcher(Dep.target)
                return value
            },
            set(newValue){
                if(newValue === value){
                    return 
                }
                value = newValue
                that.walk(newValue)
                // 当数据发生改变时,就调用dep的notify方法 通知每一个watcher 去更新视图
                dep.notify()
            }
        })
    }
}